<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../bower_components/paper-radio-button/paper-radio-button.html">

<dom-module id="slide-show">
    <template>
        <style>
            :host {
                overflow: hidden;
                @apply(--layout-fullbleed);
                @apply(--layout-vertical);
                position: absolute;
                width: 100%;
                height:450px;
            }

            neon-animated-pages {
                @apply(--layout-flex);
            }

            neon-animatable {
                color: white;
                @apply(--layout-horizontal);
                @apply(--layout-center-center);
                @apply(--paper-font-display4);
            }

            neon-animatable:nth-child(1) {
                background: var(--paper-red-500);
            }

            neon-animatable:nth-child(2) {
                background: var(--paper-blue-500);
            }

            neon-animatable:nth-child(3) {
                background: var(--paper-orange-500);
            }

            neon-animatable:nth-child(4) {
                background: var(--paper-green-500);
            }

            neon-animatable:nth-child(5) {
                background: var(--paper-purple-500);
            }

            paper-radio-group {
                --paper-radio-group-item-padding: 2px;
            }

            paper-radio-button.custom {
                --paper-radio-button-checked-color: #EDB71E;
                --paper-radio-button-checked-ink-color: #ffffff;
                --paper-radio-button-unchecked-color: #EDB71E;
                --paper-radio-button-unchecked-ink-color: #ffffff;
                --paper-radio-button-label-color: #ffffff;
            }

            paper-icon-button {
                /*opacity: 0.5;*/
                color: #ffffff;
            }

            .flex-center-justified {
                @apply(--layout-horizontal);
                @apply(--layout-center-justified);
            }
        </style>

        <div style="position:absolute; z-index: 10;position: absolute;z-index: 10;width: 100%;min-width:1020px;height: 100%;top: 4px;">
            <div class="container flex-center-justified">
                <div style="width: 1020px;text-align: right;">
                    <paper-radio-group id="radioGroup" selected="{{selected}}">
                        <paper-radio-button class="custom" name="0"></paper-radio-button>
                        <paper-radio-button class="custom" name="1"></paper-radio-button>
                        <paper-radio-button class="custom" name="2"></paper-radio-button>
                    </paper-radio-group>
                </div>
            </div>
        </div>
        <neon-animated-pages id="pages" selected="[[selected]]" entry-animation="slide-from-right-animation"
                             exit-animation="slide-left-animation" style="position: absolute;width: 100%;min-width:1020px;height: 100%;">
            <neon-animatable style="background:url(/images/slideshow01.png) center no-repeat;width: 100%;min-width:1020px;"></neon-animatable>
            <neon-animatable style="background:url(/images/slideshow02.png) center no-repeat;width: 100%;min-width:1020px;"></neon-animatable>
            <neon-animatable style="background:url(/images/slideshow03.png) center no-repeat;width: 100%;min-width:1020px;"></neon-animatable>
        </neon-animated-pages>


    </template>

    <script>
        Polymer({
            is: 'slide-show',

            properties: {
                page: {
                    type: String,
                    reflectToAttribute: true,
                    observer: '_pageChanged'
                },
                selected: {
                    type: Number,
                    value: 0,
                    notify: true,
                    observer: '_selectedChanged'
                }
            },

            attached: function () {
                this.startSlideShow();
            },

            startSlideShow: function () {
                this.selected = this.selected === 2 ? 0 : (parseInt(this.selected) + 1);
                if (this.selected > 2 || this.selected < 0) {
                    this.selected = 0;
                }
                this.async(this.startSlideShow, 5000);
            },

            _selectedChanged: function (newValue, oldValue) {
//                this.entryAnimation = 'slide-from-right-animation';
//                this.exitAnimation = 'slide-left-animation';
//                this.selected = querySelector("radioGroup").selected = newValue;
//                console.info("newValue: "+ newValue);
            },

            _onPrevClick: function () {
                this.entryAnimation = 'slide-from-left-animation';
                this.exitAnimation = 'slide-right-animation';
                this.selected = this.selected === 0 ? 2 : (this.selected - 1);
            },
            _onNextClick: function () {
                this.entryAnimation = 'slide-from-right-animation';
                this.exitAnimation = 'slide-left-animation';
                this.selected = this.selected === 2 ? 0 : (this.selected + 1);
            },
            _onUpClick: function () {
                this.entryAnimation = 'slide-from-top-animation';
                this.exitAnimation = 'slide-down-animation';
                this.selected = this.selected === 2 ? 0 : (this.selected + 1);
            },
            _onDownClick: function () {
                this.entryAnimation = 'slide-from-bottom-animation';
                this.exitAnimation = 'slide-up-animation';
                this.selected = this.selected === 0 ? 2 : (this.selected - 1);
            }

        });


    </script>
</dom-module>
